<template>
  <div class="PatientSeeking">
    <div class="Tb">
      <el-table
        ref="multipleTable"
        :data="listable1"
        tooltip-effect="dark"
        style="width: 100%"
        @select="getselect"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="serial_no" label="处方号" width="120"></el-table-column>
        <el-table-column prop="item_class_name" label="类别"></el-table-column>
        <el-table-column prop="drug_name" label="医嘱名称" width="220"></el-table-column>
        <el-table-column prop="order_no" label="组"></el-table-column>
        <el-table-column prop="dose" label="每次量"></el-table-column>
        <el-table-column prop="dose_unit_name" label="单位"></el-table-column>
        <el-table-column prop="usage_name" label="用法"></el-table-column>
        <el-table-column prop="freq_detail" label="备注（滴速）"></el-table-column>
        <el-table-column prop="frequency" label="频次"></el-table-column>
        <el-table-column prop="repetition" label="天数"></el-table-column>
        <el-table-column prop="amount" label="总量"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="drug_storage" label="执行科室"></el-table-column>
        <el-table-column prop="doctor_name" label="开立医生"></el-table-column>
        <el-table-column prop="drug_storage_name" label="开立科室"></el-table-column>
        <el-table-column prop="drug_storage_name" label="开单时间"></el-table-column>
      </el-table>
      <!-- <table class="table table-bordered">
          <thead>
            <tr>
              <td></td>
              <td>处方号</td>
              <td>类别</td>
              <td>医嘱名称</td>
              <td>组</td>
              <td>每次量</td>
              <td>单位</td>
              <td>用法</td>
              <td>备注（滴速）</td>
              <td>频次</td>
              <td>天数</td>
              <td>总量</td>
              <td>单位</td>
              <td>样本</td>
              <td>执行科室</td>
              <td>加急</td>
              <td>开立医生</td>
              <td>开立科室</td>
              <td>开单时间</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(tabitem,tabindex) in listable1" :key="tabindex">
              <td>
                <i class="glyphicon-paperclip glyphicon"></i>
                <label>
                  <input type="checkbox" @click="getZhongWarkt(tabitem,tabindex,$event)" />
                </label>
              </td>
              <td>{{tabitem.serial_no}}</td>
              <td>{{tabitem.item_class_name}}</td>
              <td>{{tabitem.drug_name}}</td>
              <td>{{tabitem.order_no}}</td>
              <td>{{tabitem.dose}}</td>
              <td>{{tabitem.dose_unit_name}}</td>
              <td>{{tabitem.usage_name}}</td>
              <td>{{tabitem.freq_detail}}</td>
              <td>{{tabitem.frequency}}</td>
              <td>{{tabitem.repetition}}</td>
              <td>{{tabitem.amount}}</td>
              <td>{{tabitem.unit}}</td>
              <td>{{tabitem.yangben}}</td>
              <td>{{tabitem.drug_storage}}</td>
              <td>{{tabitem.Urgent}}</td>
              <td>{{tabitem.doctor_name}}</td>
              <td>{{tabitem.drug_storage_name}}</td>
              <td>{{tabitem.visit_date}}</td>
            </tr>
          </tbody>
      </table>-->
    </div>
  </div>
</template>
<script>
export default {
  name: "PatientSeeking",
  data() {
    return {
      msg: "outpatientdoctor 下的 PatientSeeking",
      listable1: [], //右侧table内容
      tabindex1: -1,
      tablist: [] //
    };
  },
  methods: {
    getlistable() {
      //右侧列表
      var data = {
        model: "4.门诊医生-[处方]",
        code: "4007",
        input: {
          visit_date: "2019-09-26 13:17:45", //就诊日期  ''
          visit_no: -1, //就诊序号
          serial_no: "" //流水单号
        }
      };
      console.log(data);
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log(res);
          if (res.code == 0) {
            console.log(res.data);
            this.listable1 = res.data.listDrug;
          } else {
            this.$message({ showClose: true, message: res.msg, type: "error" });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getZhongWarkt(i, v, name) {
      //中西药
      // console.log(i);
      // console.log(v);
      // console.log(name);
      // console.log(name.path[0].checked);
      // console.log(this.listable1);

      if (name.path[0].checked == true) {
        this.tabindex1 = v;
        this.listable1.forEach(v => {
          if (i.serial_no == v.serial_no) {
            console.log(v);
            this.tablist.push(v);
            this.toggleSelection(this.tablist);
          }
        });
      } else {
        this.tabindex1 = "-1";
        this.tablist = [];
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log("选中集合");
      console.log(val);
      if (this.tabindex1 === -1) {
        console.log("点击选中后产生的数组");
        this.tablist = val;
        this.tabindex1 = 2;
        console.log(this.tablist);
      } else if (this.tabindex1 === 2) {
        this.tabindex1 = -1;
      }
    },
    getselect(selection, row) {
      console.log("-----勾选单行数据-------");
      console.log(row);
      this.listable1.forEach(m => {
        if (m.frequency == row.frequency && m.drug_code !== row.drug_code) {
          // this.toggleSelection(m);   
          this.$refs.multipleTable.toggleRowSelection(m);
        }
      });
    }
  },
  created() {
    this.msg = this.$route.query;
    this.getlistable();
  }
};
</script>
<style lang="scss" scoped>
.PatientSeeking {
  .el-input__inner {
    height: 25px !important;
    padding: 0 0 0 15px !important;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 28px;
    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .el-tag {
    background-color: #ecf5ff !important;
    border-color: #d9ecff !important;
    display: inline-block;
    height: 28px !important;
    padding: 0 10px;
    line-height: 28px !important;
    font-size: 12px;
    color: #409eff;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .liclass {
    background: #e2f1fd !important;
  }
  .ulclass {
    display: block !important;
  }
  @media screen and (min-height: 880px) {
    .PatientSeeking .oneLt dd {
      max-height: 480px;
    }
  }
  .topLine {
    padding: 6px 15px 3px 15px;
    background: url(../assets/line0.png) repeat-x;
    background-size: contain;
    min-width: 1180px;
    div {
      height: 28px;
      margin-bottom: 3px;
    }
    .form-control {
      height: 28px;
      padding: 0 5px;
      float: left;
    }
    .btn {
      height: 28px;
      padding: 0 10px;
      float: left;
    }
    span {
      float: left;
      display: block;
      line-height: 26px;
      background: #f6f6f6;
      border: 1px solid #ccc;
      margin-right: -3px;
      position: relative;
      padding-left: 5px;
      z-index: 2;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    b {
      float: left;
      display: block;
      line-height: 28px;
    }
    label {
      float: left;
      line-height: 28px;
    }
    .line1 {
      p {
        float: left;
      }
      p:nth-child(2) {
        margin-left: 18px;
      }
      p:nth-child(2) input {
        margin-right: -1px;
      }
      p:nth-child(2) select {
        border-radius: 0;
        position: relative;
        margin-left: -2px;
        margin-right: -2px;
      }
      .btn {
        margin-left: 5px;
      }
    }
    .line2 {
      height: 32px;
      line-height: 32px;
      span {
        height: 32px;
      }
      .SpanZd {
        width: 1071px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 5px;
        float: left;
        background-color: #fff;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #409eff;
        border-right: 1px solid #409eff;
        border-top: 1px solid #409eff;
        border-radius: 4px;
      }
    }
    .line3 {
      p {
        margin-right: 15px;
        float: left;
      }
      label {
        padding-right: 8px;
        background: #fff;
        height: 26px;
        padding-left: 8px;
        position: relative;
        top: 1px;
        input {
          position: relative;
          top: 1px;
          margin-right: 3px;
        }
      }
    }
  }
  .oMain {
    ul {
      height: 30px;
      line-height: 29px;
      margin: 3px 0 0 15px;
      position: relative;
      top: 1px;
      z-index: 2;
      li {
        background: #eee;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        color: #666;
        float: left;
        padding: 0 15px;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
      }
      li.high {
        background: #fff;
        color: #333;
      }
    }
    .clearfix {
      border: 1px solid #ddd;
      margin: 0 15px;
      position: fixed;
      left: 200px;
      right: 20px;
      top: 190px;
      bottom: 40px;
    }
  }
  .oneLt {
    width: 200px;
    float: left;
    dl {
      margin: 0;
    }
    dt {
      background: #f6f6f6;
      height: 28px;
      line-height: 28px;
      margin: 5px;
      cursor: pointer;
      text-align: center;
    }
    dd {
      padding: 2px 10px;
      max-height: 310px;
      overflow-y: auto;
      display: none;
      margin-right: 5px;
      p {
        line-height: 18px;
        margin-bottom: 5px;
      }
      p:last-child {
        margin-bottom: 0;
      }
    }
  }
  .twoLt {
    width: 210px;
    float: left;
    margin-left: 5px;
    .form-control {
      height: 25px;
      padding: 0 5px;
    }
    .btn {
      height: 26px;
      padding: 0 12px;
      position: relative;
      top: -2px;
    }
    .ultwoli {
      display: none;
    }
    .form-group {
      padding-top: 32px;
      b {
        display: block;
        font-weight: bold;
      }
      p {
        margin-bottom: 2px;
      }
      span {
        display: inline-block;
        min-width: 42px;
      }
    }
  }
  .threeRt {
    position: absolute;
    right: 10px;
    left: 415px;
    top: 0;
    height: 100%;
    .Tb {
      position: absolute;
      right: 0;
      left: 0;
      border: 1px solid #ddd;
      bottom: 40px;
      top: 32px;
    }
    .Tb + p {
      position: absolute;
      bottom: 10px;
      font-weight: bold;
      span {
        margin-right: 25px;
      }
      b {
        font-weight: bold;
      }
    }
    table {
      border: none;
      label {
        margin: 0;
        padding: 0 3px;
        cursor: pointer;
      }
      th,
      td {
        padding: 4px 5px;
      }
      td:first-child {
        border-left: none;
      }
      td:last-child {
        border-right: none;
      }
    }
    .glyphicon-paperclip {
      color: blue;
      display: inline-block;
      padding: 3px 8px;
      cursor: pointer;
      width: 30px;
    }
  }
  .cek {
    height: 32px;
    line-height: 32px;
    text-align: right;
    label {
      margin-left: 10px;
    }
    input {
      position: relative;
      top: 1px;
      margin-right: 3px;
    }
  }
  .rdo {
    position: absolute;
    height: 32px;
    line-height: 32px;
    top: 0;
    z-index: 2;
    span {
      font-weight: bold;
    }
    input {
      position: relative;
      top: 1px;
      margin-right: 3px;
    }
    label {
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .tableresalve {
    position: relative;
  }
  .Yftable {
    position: absolute;
    left: 260px;
    width: 530px;
    height: 200px;
    border: 1px solid #eee;
    overflow: auto;
    z-index: 99;
    background: #fff;
    tr {
      white-space: nowrap;
      cursor: pointer;
    }
    .highlight {
      background: #08246b;
      color: white;
    }
    td {
      white-space: nowrap;
    }
  }
  .footLine {
    position: fixed;
    bottom: 0;
    left: 200px;
    right: 0;
    height: 40px;
    background: #eee;
    padding: 4px 15px;
    .lt {
      .btn {
        margin-left: 2px;
      }
    }
    .rt {
      .btn {
        margin-right: 2px;
      }
    }
  }
  .btn-add {
    float: right;
    margin: 10px 13px 0 0;
  }
  /*侧边栏*/
  .divclassTFalse {
    display: none;
  }
  .SideLine {
    position: fixed;
    top: 46px;
    bottom: 40px;
    right: 0px;
    background: #e6e6e6;
    width: 25px;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    p {
      position: absolute;
      top: 50%;
      margin-top: -55px;
      color: #666;
    }
  }
  .Sidebar {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99;
    .Sideberdiv {
      width: 300px;
      background: #fff;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      padding: 0 10px;
      .line1 {
        height: 32px;
        margin: 5px 0;
      }
      .Tb {
        border: 1px solid #ddd;
        height: 258px;
        overflow-y: auto;
      }
      .Tb table {
        border: none;
        margin: 0;
      }
      .Tb table td {
        padding: 4px 5px;
      }
      .Tb table tr:first-child td {
        border-top: none;
      }
      .Tb table td:first-child {
        border-left: none;
      }
      .Tb table td:last-child {
        border-right: none;
      }
      select {
        height: 28px;
        width: 160px;
      }
      .line2 {
        position: absolute;
        top: 300px;
        bottom: 0;
        right: 10px;
        width: 280px;
        overflow-y: auto;
        background: #e9f1ff;
        padding: 10px 5px 0 5px;
      }
      .line2 dl {
        clear: both;
      }
      .line2 dt {
        float: left;
        color: blue;
      }
      .line2 dd {
        float: right;
        width: 228px;
        margin-bottom: 5px;
      }
      .line3 {
        position: absolute;
        bottom: 0;
        right: 10px;
        width: 280px;
        height: 90px;
        display: none;
      }
      .line3 input[type="checkbox"] {
        position: relative;
        top: 2px;
        margin-right: 3px;
        margin-left: 50px;
      }
      .line3 input[type="text"] {
        width: 35px;
        height: 20px;
        background: #eee;
        border: 1px solid #bbb;
      }
      .line3 p:nth-child(2) {
        margin: 7px 0 3px 0;
      }
      .arrow_1 {
        right: 300px;
        z-index: 3;
        position: fixed;
        top: 50%;
        height: 110px;
        width: 32px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        color: #888;
        line-height: 18px;
        background: rgba(243, 243, 243, 0.8);
        margin-top: -55px;
        cursor: pointer;
        padding: 10px;
      }
    }
  }
  /*弹框：动态信息*/
  .dyHidden {
    display: none;
  }
  .dynamicBg {
    .panel-default {
      width: 1000px;
      margin: 50px auto;
      background: #fff;
      border-radius: 5px;
      position: relative;
    }
    .panel-default:after {
      content: "";
      width: 1px;
      height: 445px;
      background: #f5f5f5;
      position: absolute;
      left: 50%;
      top: 40px;
    }
    .twoList > div {
      width: 50%;
      float: left;
      padding: 0 15px;
    }
    .Tb {
      border: 1px solid #ddd;
      height: 406px;
      overflow-y: auto;
    }
    .table {
      border: none;
      td:first-child {
        border-left: none;
      }
      td:last-child {
        border-right: none;
      }
      td,
      th {
        padding: 4px 5px;
      }
    }
    .p1 {
      margin: 5px 0;
      b {
        color: red;
        padding: 0 3px;
        font-weight: bold;
      }
      .btn {
        padding: 0 12px;
        height: 28px;
        margin-left: 5px;
      }
      input[type="text"] {
        padding: 0 5px;
        height: 28px;
        width: 135px;
        float: left;
      }
      span {
        margin-right: 20px;
        float: left;
        line-height: 28px;
      }
    }
    .footBtn {
      height: 32px;
      margin: 8px 0 12px 0;
      .btn:first-child {
        margin-right: 20px;
      }
    }
    .noData {
      text-align: center;
      color: red;
      padding: 13px 0;
      border: none;
    }
  }
  /*弹框 检验报告样式     模板    公共样式*/
  .Report {
    height: 510px;
    .form-group {
      margin: 0;
      padding: 5px 0;
      p:first-child {
        margin-left: 15px;
      }
    }
    .oneBox p .btn {
      margin-right: 5px !important;
    }
  }
  .importBox {
    .Tb {
      .table {
        border: none;
        th,
        td {
          padding: 4px 5px;
        }
        td:first-child {
          border-left: none;
        }
        td:last-child {
          border-right: none;
        }
      }
    }
  }
  /*弹框 检验报告样式*/
  .yanReport {
    .panel-default {
      width: 1000px;
      margin: 30px auto;
      background: #fff;
      position: relative;
      border-radius: 5px;
    }
    .Report {
      .speed {
        clear: both;
        padding: 5px 15px 0 15px;
        div {
          margin: -22px 0 6px 75px;
          height: 16px;
          background: #f3f3f3;
          border-radius: 15px;
          overflow: hidden;
          span {
            display: inline-block;
            background: #67e467;
            height: 16px;
          }
        }
      }
      .blue {
        color: blue;
      }
      .red {
        color: red;
      }
      .pucType2 {
        .form-control {
          padding: 0 5px;
          width: 120px;
        }
        p {
          margin-left: 13px;
        }
      }
      .oneBox {
        p {
          margin-right: 0 !important;
          .btn {
            margin-right: 5px !important;
          }
        }
      }
    }
    .importBox {
      .Tb {
        position: absolute;
        top: 130px;
        width: 400px;
        bottom: 10px;
        left: 15px;
        border: 1px solid #ddd;
        overflow-y: auto;
      }
      .Main {
        position: absolute;
        top: 130px;
        bottom: 10px;
        left: 425px;
        right: 15px;
        border: 1px solid #ddd;
        overflow-y: auto;
        background: #f8f8f8;
        padding: 0 15px;
        .line1 {
          padding: 10px 0 20px 0;
          text-align: right;
          width: 100%;
          .btn {
            margin-left: 10px;
          }
        }
        div {
          clear: both;
          p:nth-child(2) {
            margin-left: 30px;
          }
        }
        .line2 p {
          float: left;
        }
        .line3 {
          padding-top: 8px;
          p:first-child {
            margin-bottom: 8px;
          }
        }
        textarea {
          resize: none;
          height: 100px;
        }
        .area {
          padding-top: 8px;
          padding-left: 74px;
          margin-bottom: -5px;
          label {
            vertical-align: top;
            margin-left: -74px;
            padding-top: 5px;
          }
        }
      }
    }
  }
  /*弹框 模板*/
  .Template {
    .panel-default {
      width: 1000px;
      margin: 30px auto;
      background: #fff;
      position: relative;
      border-radius: 5px;
    }
    .peel label {
      background: none !important;
      border: none !important;
      cursor: pointer;
      margin-right: 10px !important;
      input {
        position: relative;
        top: 1px;
        margin-right: 3px;
      }
    }
    .Report .rt .btn {
      float: right;
      margin: 0 0 0 10px;
    }
    .importBox {
      .Tb {
        position: absolute;
        top: 95px;
        width: 240px;
        bottom: 10px;
        left: 15px;
        border: 1px solid #ddd;
        overflow: auto;
      }
      .Tb2 input[type="checkbox"] {
        position: relative;
        top: 1px;
        margin-right: 3px;
      }
      .Main {
        position: absolute;
        top: 95px;
        bottom: 10px;
        left: 270px;
        right: 15px;
        overflow-y: auto;
      }
      .h6 {
        font-size: 15px;
        margin: 0;
        height: 30px;
        color: #0092ff;
        line-height: 26px;
      }
    }
  }
  /*读卡*/
  .duKaBg {
    .panel-default {
      width: 600px;
      height: 400px;
      margin: 30px auto;
      background: #fff;
      border-radius: 5px;
      position: relative;
    }
    .oUl {
      padding: 9px 15px 0 15px;
      height: 42px;
      margin-bottom: 0;
      border-bottom: 1px solid #ddd;
    }
    .oUl .high {
      background: #56b1ff;
      border: none;
      color: #fff;
      line-height: 33px;
    }
    .oUl li {
      float: left;
      line-height: 31px;
      border-top: 1px solid #ddd;
      cursor: pointer;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      padding: 0 15px;
      margin-right: -1px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background: #f6f6f6;
    }
    .oMain {
      padding: 15px;
    }
    .oMain p {
      margin-bottom: 15px;
      margin-top: 10px;
    }
    .oMain p span {
      font-size: 15px;
      float: left;
      line-height: 32px;
    }
    .oMain p .form-control {
      float: left;
    }
    .oMain p .btn {
      margin-left: 8px;
    }
    .oMain .showArea {
      width: 200px;
      height: 200px;
      background: #eee;
      text-align: center;
      line-height: 200px;
      border-radius: 3px;
    }
  }
}
</style>